<template>
  <el-card>
    <el-input
      style="margin-bottom: 40px"
      placeholder="输入关键字进行过滤"
      v-model="filterText"
    >
    </el-input>
    <el-tree
      ref="tree"
      :data="data"
      :props="defaultProps"
      :filter-node-method="filterNode"
      default-expand-all
    ></el-tree>
  </el-card>
</template>

<script setup lang="ts">
import { getCourseList } from "@/api/teacher";
import { onMounted, ref, watch } from "vue";

const tree = ref(null);
const filterText = ref("");

const data = ref([]);

const defaultProps = ref({
  children: "children",
  label: "title",
});

const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
};
const getData = async () => {
  const res = await getCourseList();
  if (res.success) {
    data.value = res.data.data;
  }
};

watch(
  () => filterText.value,
  (value) => {
    tree.value.filter(value.toLowerCase());
  }
);

onMounted(() => {
  getData();
});
</script>